<template>
  <div>
    <!-- 头 -->
    <userTitel :title="title"></userTitel>
    <!-- 卡片1 -->
    <el-card shadow="never" style="padding-left: 45px">
      <el-form :inline="true">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="运单编号 :">
              <el-input
                v-model="formObj.account"
                style="width: 390px"
                placeholder="请输入运单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input
                v-model="formObj.name"
                style="width: 390px"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调度状态">
              <el-input
                v-model="formObj.mobile"
                style="width: 390px"
                placeholder="请选择"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <br />

        <el-row>
          <el-col :span="8">
            <el-form-item label="起始地机构 :">
              <el-select
                @clear="handleClear"
                v-model="formObj.agency.name"
                style="width: 390px"
                placeholder="请选择起始地机构"
              >
                <el-option
                  hidden
                  :value="formObj.agency.name"
                  :label="formObj.agency.name"
                >
                </el-option>
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClickOne"
                ></el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构 :">
              <el-select
                @clear="handleClear"
                v-model="formObj.agency.name"
                style="width: 390px"
                placeholder="请选择目的地机构"
              >
                <el-option
                  hidden
                  :value="formObj.agency.name"
                  :label="formObj.agency.name"
                >
                </el-option>
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClickOne"
                ></el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前所在机构 :">
              <el-select
                @clear="handleClear"
                v-model="formObj.agency.name"
                style="width: 390px"
                placeholder="请选择当前所在机构"
              >
                <el-option
                  hidden
                  :value="formObj.agency.name"
                  :label="formObj.agency.name"
                >
                </el-option>
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClickOne"
                ></el-tree>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="so">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 卡片2 -->
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <!-- 全部 -->
      <el-tab-pane name="2">
        <el-button type="primary">增加车辆</el-button>
        <template #label>
          <span>全部</span>
        </template>
        <!-- 表格 -->
        <el-table :data="formData" border style="width: 100%; margin-top: 20px">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="licensePlate" label="运单编号" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="订单编号">
          </el-table-column>
          <el-table-column prop="driverNum" label="运单状态"> </el-table-column>
          <el-table-column prop="workStatus" label="调度状态">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="起始营业部">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="终点营业部">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="当前所在机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="下一个机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总体积(立方米)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总重量(千克)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="创建时间">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="更新时间">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="280">
            <template #default="{ row }">
              <el-link
                @click="EchoInfo(row)"
                :underline="false"
                style="color: #52a7ff"
                >查看详情
              </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" type="primary">停用 </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" style="color: #52a7ff">
                配置司机</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="111"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 待提货 -->
      <el-tab-pane name="1" label="可用">
        <el-button type="primary">增加车辆</el-button>
        <template #label>
          <span>待提货</span>
        </template>
        <!-- 表格 -->
        <el-table :data="formData" border style="width: 100%; margin-top: 20px">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="licensePlate" label="运单编号" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="订单编号">
          </el-table-column>
          <el-table-column prop="driverNum" label="运单状态"> </el-table-column>
          <el-table-column prop="workStatus" label="调度状态">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="起始营业部">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="终点营业部">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="当前所在机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="下一个机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总体积(立方米)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总重量(千克)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="创建时间">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="更新时间">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="280">
            <template #default="{ row }">
              <el-link
                @click="EchoInfo(row)"
                :underline="false"
                style="color: #52a7ff"
                >查看详情
              </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" type="primary">停用 </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" style="color: #52a7ff">
                配置司机</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="111"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 进行中 -->
      <el-tab-pane name="0" label="停用">
        <el-button type="primary">增加车辆</el-button>
        <template #label>
          <span>进行中</span>
        </template>
        <!-- 表格 -->
        <el-table :data="formData" border style="width: 100%; margin-top: 20px">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="licensePlate" label="运单编号" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="订单编号">
          </el-table-column>
          <el-table-column prop="driverNum" label="运单状态"> </el-table-column>
          <el-table-column prop="workStatus" label="调度状态">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="起始营业部">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="终点营业部">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="当前所在机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="下一个机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总体积(立方米)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总重量(千克)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="创建时间">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="更新时间">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="280">
            <template #default="{ row }">
              <el-link
                @click="EchoInfo(row)"
                :underline="false"
                style="color: #52a7ff"
                >查看详情
              </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" type="primary">停用 </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" style="color: #52a7ff">
                配置司机</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="111"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 已完成 -->
      <el-tab-pane name="3" label="运输中">
        <el-button type="primary">增加车辆</el-button>
        <template #label>
          <span>已完成</span>
        </template>
        <!-- 表格 -->
        <el-table :data="formData" border style="width: 100%; margin-top: 20px">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="licensePlate" label="运单编号" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="订单编号">
          </el-table-column>
          <el-table-column prop="driverNum" label="运单状态"> </el-table-column>
          <el-table-column prop="workStatus" label="调度状态">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="起始营业部">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="终点营业部">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="当前所在机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="下一个机构">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总体积(立方米)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="货品总重量(千克)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="创建时间">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="更新时间">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="280">
            <template #default="{ row }">
              <el-link
                @click="EchoInfo(row)"
                :underline="false"
                style="color: #52a7ff"
                >查看详情
              </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" type="primary">停用 </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" style="color: #52a7ff">
                配置司机</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="111"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getList, getUserList } from "@/api/operational-range";
export default {
  name: "transport-task",
  data() {
    return {
      activeName: "2",
      title: "运单管理",
      // 列表渲染
      formData: [{}], //全部
      formData1: [{}], //可用
      formData2: [{}], //停用
      // 树形
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 双向绑定
      formObj: {
        account: "", //快递员账号
        name: "", //快递员姓名
        mobile: "", //快递员手机号
        agency: { name: "" }, //所属机构
        // workStatus: "", //工作状态
      },
      // name: "", //所属机构
      // 分页
      page: {
        page: 1,
        pageSize: 10,
      },
      currentPage4: 1, //默认第几页
      counts: "", //总条目
    };
  },

  created() {
    this.getMechanism();
  },

  methods: {
    handleClick() {
      console.log(12);
    },
    // 下拉数据
    async getMechanism() {
      const res = await getList();
      console.log(JSON.parse(res.data));
      this.data = JSON.parse(res.data);
    },
    // 树形
    handleNodeClickOne(data) {
      console.log(data.name);
      this.formObj.agency.name = data.name;
      console.log(this.formObj);
    },
    handleClear() {
      this.name = "";
    },
    // 获取列表
    async getUser() {
      const res = await getUserList(this.page);
      console.log(res.data);
      this.formData = res.data.items;
      this.counts = res.data.counts;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getUser();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.getUser();
    },
    // 查找
    async so() {
      console.log("查找");
      const res = await getUserList({
        page: this.page.page,
        pageSize: this.page.pageSize,
        name: this.formObj.name, //快递员姓名
        mobile: this.formObj.mobile, //快递员手机号
        account: this.formObj.account, //快递员账号
        agency: this.formObj.agency.name, //
      });
      console.log(res);
      this.formData = res.data.items;
    },
    // 重置
    reset() {
      this.formObj = {
        account: "", //快递员账号
        name: "", //快递员姓名
        mobile: "", //快递员手机号
        agency: { name: "" }, //所属机构
        // workStatus: "", //工作状态
      };
    },
  },
};
</script>

<style scoped lang="scss">
.gree {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: green;
  border-radius: 50%;
}
.red {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: red;
  border-radius: 50%;
}
::v-deep .el-card {
  text-align: left;
  line-height: 24px;
}

::v-deep.el-tabs.el-tabs--top.el-tabs--border-card {
  margin-top: 20px !important;
  border: 0;
}

::v-deep .el-tabs__nav-scroll {
  margin-bottom: 15px !important;
  background-color: white;
}

::v-deep .el-tabs__item.is-top.is-active {
  background-color: #ffeeeb;
  border: 0;
}

::v-deep .el-tabs--border-card {
  box-shadow: 0 0px 0px 0 rgb(0 0 0 / 12%), 0 0 0px 0 rgb(0 0 0 / 4%);
}

::v-deep .el-tabs__header.is-top {
  border: 0;
}
// ====
::v-deep .el-dialog {
  width: 600px !important;
}
::v-deep .el-dialog__body {
  text-align-last: left;
  line-height: 24px;
}
::v-deep .el-dialog__header {
  text-align-last: left;
  line-height: 24px;
  background-color: #f3f4f7;
}
.block {
  margin: 0 auto;
  margin-top: 10px;
}
::v-deep .el-card__body {
  height: 40px;
  line-height: 12px;
  text-align-last: left;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  text-align-last: left !important;
  line-height: 12px;
}
::v-deep .el-tabs__nav-scroll {
  line-height: 55px;
}
::v-deep .el-card__body {
  height: 40px;
  line-height: 12px;
  text-align: left;
}
</style>
